import React, { useEffect } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import { faFolder, faHeart, faImage, faSignal } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { NavLink } from 'react-router-dom'

interface IFileTabsProps {
    userId: string
}

export default function FileTabs(props: IFileTabsProps) {
    useEffect(() => {
        const banner = $('#userProfileBanner')
        let start_scroll_top: number | undefined = 0
        // let listWidth = (document.querySelector(`.${style.list__warp}`) as any).scrollWidth
        $(document).on('scroll', () => {
            let end_scroll_top = $(document).scrollTop()
            if (end_scroll_top! > banner.outerHeight()!) {
                $(`.${style.container}`).addClass('fix')
                $(`.${style.blank}`).addClass('active')
            }
            if (end_scroll_top! < banner.outerHeight()!) {
                $(`.${style.container}`).removeClass('fix')
                $(`.${style.blank}`).removeClass('active')
            }

            start_scroll_top = $(document).scrollTop()
        })
    }, [])

    return (
        <>
            <div className={style.container}>
                <NavLink to={'/profile/photos/' + props.userId} className={style.item}>
                    <FontAwesomeIcon icon={faImage} className={style.icon} />
                    <span>图片</span>
                </NavLink>
                <NavLink to={'/profile/like/' + props.userId} className={style.item}>
                    <FontAwesomeIcon icon={faHeart} className={style.icon} />
                    <span>喜欢</span>
                </NavLink>
                {/*<NavLink to={'/profile/collections/' + props.userId} className={style.item}>*/}
                {/*    <FontAwesomeIcon icon={faFolder} className={style.icon} />*/}
                {/*    <span>收藏夹</span>*/}
                {/*</NavLink>*/}
                {/* TODO 不一定会写到后面*/}
                {/*<NavLink to={'/profile/status/' + props.userId} className={style.item}>*/}
                {/*    <FontAwesomeIcon icon={faSignal} className={style.icon} />*/}
                {/*    <span>状态</span>*/}
                {/*</NavLink>*/}
            </div>
            <div className={style.blank} />
        </>
    )
}
